<template>
  <view class="nav-header">
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <view class="nav-content">
      <view class="left-area">
        <view v-if="showBack" class="back-btn" @click="goBack">
          <u-icon name="arrow-left" color="#333" size="22"></u-icon>
        </view>
      </view>
      <view class="title">{{ title }}</view>
      <view class="right-area">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '简历制作'
  },
  showBack: {
    type: Boolean,
    default: true
  },
  backUrl: {
    type: String,
    default: ''
  }
})

const statusBarHeight = ref(20)

onMounted(() => {
  // 获取状态栏高度
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight
})

// 返回上一页
const goBack = () => {
  if (props.backUrl) {
    uni.navigateTo({
      url: props.backUrl
    })
  } else {
    uni.navigateBack()
  }
}
</script>

<style lang="scss" scoped>
.nav-header {
  width: 100%;
  background-color: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  
  .nav-content {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 15px;
    
    .left-area {
      width: 80px;
      display: flex;
      align-items: center;
      
      .back-btn {
        padding: 6px;
      }
    }
    
    .title {
      flex: 1;
      text-align: center;
      font-size: 18px;
      font-weight: 500;
      color: #333;
    }
    
    .right-area {
      width: 80px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
</style> 